<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试插件效果文件夹</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       article{
           border: solid 5px blueviolet;
           width: 600px;
           height: 300px;
           display: flex;
           /* 换行方式 */
            flex-wrap: wrap;
           /* 排列方式 */
           /* flex-direction: column-reverse; */
           /* 同一设置排列和换行方式 */
           /* flex-flow: wrap column-reverse; */
           /* 设置主轴的对齐方式(对齐.头.尾.居中.平均分) */
            justify-content: center;
            /* 设置交叉轴对齐方式 (对齐.头.尾.居中.平均分) */
            align-items: center;
            box-sizing: border-box;
            border: cadetblue solid 10px;
           
       }
       article * {
           width: 100px;
           height: 100px;
           background: rgb(127, 228, 27);
           margin: 5px;
       }
       body{
           padding-left: 100px;
           padding-top: 200px;
       }
    </style>

    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

</head>
<body>
    <article>
        <div> <i class="fa fa-address-book-o" aria-hidden="true"></i></div>
        <div>2</div>
        <div>3</div>
    </article>
    
</body>
</html>